import React, { useContext, useEffect, useMemo, useState } from 'react';
import { Button, Col, Collapse, DatePicker, Divider, Form, Input, InputNumber, Popconfirm, Row, Select, Space, Spin, TreeSelect, message } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { CaretRightOutlined, DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
import { arieaEchoRender, arieaFormSubmit, getChangeLoadMapColorText, getKeyRouter, getLoadMapList, getTenantID, modifyChangeRecord } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { TagSelectNew } from '@/components/TagSelectNew';
import AdminAriea from '@/components/AdminAriea';
import { useRequest, history } from 'umi';
import { adminAreadDataGet } from '@/services/BaseLayout';
import { UploadFormCommon } from '@/components/UploadForm';
import { ISupplierActionEnum, SupplierLocaldataContext } from '../common';
import ScrollBarLayout from '@/components/ScrollBarLayout';

import moment from 'moment';
import { addSupplierInfoService, editSupplierInfoService } from '../services';
import { modifyJsonConfig } from '../mconfig';
import { RegularExpression } from '@/common/constVariable';
import Cls from 'classnames';
const DayDatePicket: any = DatePicker;
const { RangePicker } = DatePicker;

export const UpdateViewLeftForm: React.FC<SupplierManageAPI.IUpdateViewLeftForm> = ({ supplierCollapseKey, collapseChange }) => {
  /**  表单 form */
  const [supplierForm] = Form.useForm();

  /**  获取数据字典 */
  const { loadMapInfo, mapLoading } = getLoadMapList([
    `${getTenantID()}${ILoadMapTypeAll.MATERIAL_TYPE}`,
    `${getTenantID()}${ILoadMapTypeAll.SUPPLIER_STATE}`, //认证状态
    `${getTenantID()}${ILoadMapTypeAll.COMPANY_TYPE}`, //企业类型
    `${getTenantID()}${ILoadMapTypeAll.COMPANY_SCALE}`, //企业规模
    `${getTenantID()}${ILoadMapTypeAll.COMPANY_TAXRATE}`, //企业默认税率
    `${getTenantID()}${ILoadMapTypeAll.PURCHASE_CATEGORY}`, //供货分类
  ]);

  /** 获取上下文 */
  const {
    curRes,
    locationID,
    memoirDataList,
    qualifyDataList,
    // contactsSwitchList,
    supplierDispath,
    supplierInfoObj,
    reloadDetailInfo,
    updateFixCls,
  } = useContext(SupplierLocaldataContext);

  /**获取省市区数据 */
  const areaList = useRequest(() => {
    return adminAreadDataGet({});
  });

  /** 存储是否选择永久有效期 */
  const [isRegisterExpire, setIsRegisterExpire] = useState<string>('1');

  /** 处理是否展示操作按钮框 */
  const handleOperation = useMemo(() => {
    let isShowBtn: any = {
      allBtnDiv: false,
      saveBtn: false,
    };

    if (curRes['/supplierInfoController/add'] || curRes['/supplierInfoController/edit']) {
      if (supplierInfoObj && supplierInfoObj?.id) {
        if (supplierInfoObj?.isBlack == '0' && !supplierInfoObj?.cancelerID) {
          isShowBtn['saveBtn'] = true;
          isShowBtn['allBtnDiv'] = true;
        }
      } else {
        isShowBtn['saveBtn'] = true;
        isShowBtn['allBtnDiv'] = true;
      }
    }
    return isShowBtn;
  }, [curRes, supplierInfoObj]);

  useEffect(() => {
    if (supplierInfoObj?.id) {
      //模拟数据-王志龙
      supplierForm?.setFieldsValue({
        ...supplierInfoObj,
        materialType: supplierInfoObj?.materialType?.split(','),
        supplyType: supplierInfoObj?.supplyType?.split(','),
        register: supplierInfoObj?.registerExpire == '0' ? [moment(supplierInfoObj?.registerBegin), moment(supplierInfoObj?.registerFinish)] : [],
        rateNum: supplierInfoObj?.rateNum ? String(supplierInfoObj?.rateNum) : null,
        belongArea: arieaEchoRender(supplierInfoObj),
      });
      setIsRegisterExpire(supplierInfoObj?.registerExpire);
    } else {
      supplierForm.setFieldsValue({
        state: `${getTenantID()}${ILoadMapTypeAll.SUPPLIER_STATE}1002`,
        rateNum: `${getTenantID()}${ILoadMapTypeAll.COMPANY_TAXRATE}1004`,
      });
    }
  }, [supplierInfoObj, loadMapInfo]);

  /**
   * 添加编辑接口回调
   * @param res 接口返回数据
   * @param updateType 添加或者编辑接口
   */
  const updateSupplierCallback = (res: Record<string, any>, updateType: boolean) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      if (updateType) {
        history.push({
          pathname: `/supplierInfoController/edit/:${getKeyRouter()}${getKeyRouter()}`,
          state: {
            id: res?.obj,
            delRouterName: history.location.pathname, //必传,要删除的路由名称
          },
        });
      } else {
        reloadDetailInfo();
      }
    } else {
      message.error(res?.msg);
    }
  };

  /** 引入添加接口 */
  const { addSupplierInfoRun, addSupplierInfoLoading } = addSupplierInfoService(updateSupplierCallback);

  /** 引入编辑接口 */
  const { editSupplierInfoRun, editSupplierInfoLoading } = editSupplierInfoService(updateSupplierCallback);

  /** 保存供应商信息 */
  const onSaveSupplier = () => {
    supplierForm?.validateFields()?.then((values: any) => {
      const ariaeInfo: Record<string, any> = arieaFormSubmit(values?.belongArea);
      const payload: Record<string, any> = {
        ...values,
        ...ariaeInfo,
        registerBegin: values?.registerExpire == '0' ? moment(values?.register?.[0])?.format('YYYY-MM-DD 00:00:00') : null,
        registerFinish: values?.registerExpire == '0' ? moment(values?.register?.[1])?.format('YYYY-MM-DD 23:59:59') : null,
        materialType: values?.materialType?.length > 0 ? values?.materialType?.toString() : null,
        supplyType: values?.supplyType?.length > 0 ? values?.supplyType?.toString() : null,
        // registerBegin: values?.registerBegin ? moment(values?.registerBegin)?.format('YYYY-MM-DD HH:mm:ss') : null,
        // registerFinish: values?.registerFinish ? moment(values?.registerFinish)?.format('YYYY-MM-DD HH:mm:ss') : null,
        // contactName: values?.legalName,
        // contactMobile: values?.registerPhone ? values?.registerPhone?.split(',')?.[0] : null,
        // contactMobile: values?.registerPhone,
      };
      delete payload['belongArea'];
      delete payload['register']; //有效日期初始值
      if (locationID) {
        /** 编辑供应商 */
        const newPayloadModify: Record<string, any> = {
          ...payload,
          registerTypeName: getChangeLoadMapColorText(loadMapInfo, ILoadMapTypeAll.COMPANY_TYPE, values?.registerType),
          registerSizeName: getChangeLoadMapColorText(loadMapInfo, ILoadMapTypeAll.COMPANY_SCALE, values?.registerSize),
          supplyTypeName: getChangeLoadMapColorText(loadMapInfo, ILoadMapTypeAll.PURCHASE_CATEGORY, values?.supplyType),
          materialTypeName: getChangeLoadMapColorText(loadMapInfo, ILoadMapTypeAll.MATERIAL_TYPE, values?.materialType),
        };
        const modifyJson: Record<string, any> = modifyChangeRecord(modifyJsonConfig, newPayloadModify, supplierInfoObj);
        const editPayload: Record<string, any> = {
          ...payload,
          id: supplierInfoObj?.id,
          versionNum: supplierInfoObj?.versionNum,
          msupplierModify: {
            modifyJson: modifyJson,
          },
        };
        editSupplierInfoRun(editPayload);
      } else {
        /** 添加供应商 */
        const addPayload: Record<string, any> = {
          ...payload,
          materialType: payload?.materialType?.toString(),
          supplyType: payload?.supplyType?.toString(),
          msupplierQualifies: qualifyDataList?.length > 0 ? qualifyDataList : null,
          msupplierMemoirs: memoirDataList?.length > 0 ? memoirDataList : null,
          // msupplierContacters: contactsSwitchList?.length ? contactsSwitchList : null,
        };

        addSupplierInfoRun(addPayload);
      }
    });
  };

  /** 处理多选TreeSelect */
  const treeSelectCheck = (treeList: Record<string, any>[]) => {
    treeList?.forEach((item: any, index: number) => {
      if (item?.children && item?.children?.length > 0) {
        treeSelectCheck(item?.children);
      }
      treeList[index] = {
        ...item,
        searchtitle: item?.name,
        disabled: item?.pID ? false : true,
      };
    });
    return treeList;
  };

  return (
    <Spin spinning={addSupplierInfoLoading || editSupplierInfoLoading || mapLoading}>
      <div className={'commonTabsBodyDom'}>
        <div className="tabsBodyInfoDom">
          <ScrollBarLayout>
            <div className={Cls(pageStyles['fromView-styles'], `${updateFixCls}supplierFormLabel`)}>
              <Form form={supplierForm}>
                <Collapse
                  className={pageStyles['commonCollapse']}
                  activeKey={supplierCollapseKey}
                  bordered={false}
                  expandIcon={({ isActive }: any) => {
                    return <CaretRightOutlined rotate={isActive ? 90 : 0} />;
                  }}
                  expandIconPosition="end"
                  onChange={collapseChange}
                >
                  <Collapse.Panel header={<Divider orientation="left">基本信息</Divider>} key={'InformationPanel'} className="formCollapsePanelBox">
                    <Row>
                      <Col span={24}>
                        <Form.Item label="单位名称" name="fullName" rules={[{ required: true, message: '请输入单位名称' }]}>
                          <Input
                            placeholder="请输入单位名称"
                            allowClear
                            onChange={(e: any) => {
                              if (e?.target?.value) {
                                supplierDispath({
                                  type: ISupplierActionEnum.SUPPLIER_NAME,
                                  payload: e?.target?.value,
                                });
                              }
                            }}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="单位简称" name="shortName">
                          <Input placeholder="请输入单位简称" allowClear />
                        </Form.Item>
                      </Col>
                      {/* <Col span={12}>
                        <Form.Item label="单位类型" name="registerType">
                          <Select placeholder="请选择单位类型" loading={mapLoading}>
                            {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.COMPANY_TYPE}`]?.map((item: any) => {
                              return (
                                <Select.Option key={item?.id} value={item?.id}>
                                  {item?.name}
                                </Select.Option>
                              );
                            })}
                          </Select>
                        </Form.Item>
                      </Col> */}
                      {/* <Col span={12}>
                        <Form.Item label="认证状态" name="state">
                          <Select placeholder="请选择认证状态" loading={mapLoading}>
                            {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.SUPPLIER_STATE}`]?.map((item: any) => {
                              return (
                                <Select.Option key={item?.id} value={item?.id}>
                                  {item?.name}
                                </Select.Option>
                              );
                            })}
                          </Select>
                        </Form.Item>
                      </Col> */}
                      {/* <Col span={12}>
                        <Form.Item
                          label="企业规模"
                          name="registerSize"
                          // rules={[{ required: true, message: '请选择企业规模' }]}
                        >
                          <Select placeholder="请选择企业规模" loading={mapLoading}>
                            {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.COMPANY_SCALE}`]?.map((item: any) => {
                              return (
                                <Select.Option key={item?.id} value={item?.id}>
                                  {item?.name}
                                </Select.Option>
                              );
                            })}
                          </Select>
                        </Form.Item>
                      </Col> */}
                      <Col span={12}>
                        <Form.Item label="首要联系人" name="contactName" rules={[{ required: true, message: '请输入姓名' }]}>
                          <Input placeholder="请输入姓名" allowClear />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="联系电话" name="contactMobile" rules={[{ required: true, message: '请输入电话' }]}>
                          <Input placeholder="请输入电话" allowClear />
                        </Form.Item>
                      </Col>
                      {/* <Col span={12}>
                        <Form.Item label="供货分类" name="supplyType" rules={[{ required: true, message: '请选择供货分类' }]}>
                          <TreeSelect
                            showSearch
                            treeNodeFilterProp={'searchtitle'}
                            placeholder="请选择供货分类"
                            treeData={treeSelectCheck(loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.PURCHASE_CATEGORY}`])}
                            loading={mapLoading}
                            fieldNames={{ label: 'name', value: 'id' }}
                            multiple={true}
                            maxTagCount={1}
                          />
                        </Form.Item>
                      </Col> */}
                      {/* <Col span={12}>
                        <Form.Item label="物料类型" name="materialType" rules={[{ required: true, message: '请选择物料类型' }]}>
                          <TreeSelect
                            showSearch
                            treeNodeFilterProp={'searchtitle'}
                            placeholder="请选择物料类型"
                            // treeData={treeSelectCheck(loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.MATERIAL_TYPE}`])}
                            treeData={loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.MATERIAL_TYPE}`]}
                            loading={mapLoading}
                            fieldNames={{ label: 'name', value: 'id' }}
                            multiple={true}
                            maxTagCount={1}
                          />
                        </Form.Item>
                      </Col> */}

                      <AdminAriea
                        cascaderData={areaList ? areaList?.data?.obj : null}
                        colSpan={12}
                        isRequired={false}
                        labelName="所属区域"
                        formName="belongArea"
                        allDataID={[]}
                        areaAll={() => {}}
                        // areaAll={getBelongAreaVals} // 这个是用户选择数据后，会返回的数据 function
                        showSearch={true}
                        fieldNames={{ label: 'text', value: 'id' }}
                        allowClear={true}
                      />

                      {/* <Col span={12}>
                        <Form.Item
                          label="门户网站"
                          name="websiteURL"
                          rules={[
                            {
                              pattern: RegularExpression?.websiteCode,
                              message: '门户网站格式不正确！',
                            },
                          ]}
                        >
                          <Input placeholder="请输入门户网站" allowClear />
                        </Form.Item>
                      </Col> */}
                      {/* <UploadFormCommon
                        form={supplierForm}
                        fileFormName={'regiserLogo'}
                        spanCol={12}
                        inRowProportion={24}
                        name={'attachFile'}
                        url={'/supplierInfoController/uploadFile'}
                        downloadUrl={'/supplierInfoController/downloadFile'}
                        label="企业logo"
                        required={false}
                        accept={'.jpg|.png|.jpeg'}
                        fileFormDelName={'delRegiserLogo'}
                        delFunc={() => {}}
                        maxFile={1}
                        defaultFiles={supplierInfoObj && supplierInfoObj?.regiserLogo ? supplierInfoObj?.regiserLogo : null}
                      >
                        企业logo
                      </UploadFormCommon> */}
                      <Col span={24}>
                        <Form.Item label="单位地址" name="workAddress" rules={[{ required: true, message: '请选择单位地址' }]}>
                          <Input.TextArea placeholder={`请输入单位地址`} showCount maxLength={600} autoSize={{ minRows: 2, maxRows: 4 }} />
                        </Form.Item>
                      </Col>
                      {/* <Col span={24}>
                        <Form.Item label="经营范围" name="businessScope">
                          <Input.TextArea placeholder={`请输入经营范围`} showCount maxLength={600} autoSize={{ minRows: 2, maxRows: 4 }} />
                        </Form.Item>
                      </Col> */}

                      <UploadFormCommon
                        form={supplierForm}
                        fileFormName={'licenceURL'}
                        spanCol={24}
                        inRowProportion={24}
                        name={'attachFile'}
                        url={'/supplierInfoController/uploadFile'}
                        downloadUrl={'/supplierInfoController/downloadFile'}
                        label="营业执照"
                        required={false}
                        accept={'.jpg|.png|.jpeg'}
                        fileFormDelName={'licenceURLDel'}
                        delFunc={() => {}}
                        maxFile={1}
                        fieldBusiPath={'supplier/info'}
                        defaultFiles={supplierInfoObj && supplierInfoObj?.licenceURL ? supplierInfoObj?.licenceURL : null}
                      >
                        营业执照
                      </UploadFormCommon>
                    </Row>
                  </Collapse.Panel>
                  <Collapse.Panel header={<Divider orientation="left">注册信息</Divider>} key={'registrationPanel'} className="formCollapsePanelBox">
                    <Row>
                      {/* <TagSelectNew
                        colSpan={12}
                        formLabel="是否年检"
                        formName="isInspect"
                        defalultKeys={supplierInfoObj?.isInspect === undefined ? 1 : supplierInfoObj?.isInspect}
                        radioList={[
                          {
                            value: 1,
                            name: '是',
                          },
                          {
                            value: 0,
                            name: '否',
                          },
                        ]}
                      /> */}
                      {/* <TagSelectNew
                        colSpan={12}
                        formLabel="是否一般纳税人"
                        formName="isGeneral"
                        defalultKeys={supplierInfoObj?.isGeneral === undefined ? 1 : supplierInfoObj?.isGeneral}
                        radioList={[
                          {
                            value: 1,
                            name: '是',
                          },
                          {
                            value: 0,
                            name: '否',
                          },
                        ]}
                      /> */}
                      <Col span={12}>
                        <Form.Item
                          label="开户行名称"
                          name="bankName"
                          rules={[
                            {
                              required: true,
                              message: '请输入开户行名称',
                            },
                          ]}
                        >
                          <Input placeholder="请输入开户行名称" allowClear />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label="开户行账号"
                          name="bankAccount"
                          rules={[
                            {
                              required: true,
                              message: '请输入开户行账号',
                            },
                            // {
                            //   pattern: RegularExpression?.bankAccount,
                            //   message: '开户行账号格式不正确！',
                            // },
                          ]}
                        >
                          <Input placeholder="请输入开户行账号" allowClear />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                          label="注册电话"
                          name="registerPhone"
                          rules={[
                            {
                              required: true,
                              message: '请输入注册电话',
                            },
                            // {
                            //   pattern: /^\d{3,4}-?\d{7,8}(,\d{3,4}-?\d{7,8}){0,3}$/,
                            //   message: '最多输入三个注册电话，英文逗号隔开！',
                            // },
                            // {
                            //   pattern: RegularExpression?.number,
                            //   message: '注册电话格式不正确！',
                            // },
                          ]}
                        >
                          {/* <Input placeholder="最多输入三个注册电话，英文逗号隔开" allowClear /> */}
                          <Input placeholder="请输入注册电话" allowClear />
                        </Form.Item>
                      </Col>
                      {/* <Col span={12}>
                        <Form.Item label="注册资本" name="registerCapital">
                          <InputNumber min={0} placeholder="请输入注册资本" addonAfter="万元" controls={false} />
                        </Form.Item>
                      </Col> */}
                      <Col span={12}>
                        <Form.Item
                          label="统一社会信用代码"
                          name="creditID"
                          rules={[
                            {
                              required: true,
                              message: '请输入统一社会信用代码',
                            },
                            // {
                            //   pattern: RegularExpression?.creditCode,
                            //   message: '统一社会信用代码格式不正确！',
                            // },
                          ]}
                        >
                          <Input placeholder="请输入统一社会信用代码" allowClear />
                        </Form.Item>
                      </Col>

                      {/* <Col span={12}>
                        <Form.Item
                          label="授权人代表"
                          name="authName"
                        >
                          <Input placeholder="请输入授权人代表" allowClear />
                        </Form.Item>
                      </Col> */}

                      <Col span={12}>
                        <Form.Item
                          label="法人代表"
                          name="legalName"
                          rules={[
                            {
                              required: true,
                              message: '请输入法人代表',
                            },
                          ]}
                        >
                          <Input placeholder="请输入法人代表" allowClear />
                        </Form.Item>
                      </Col>
                      {/* <Col span={12}>
                        <Form.Item label="默认税率" name="rateNum">
                          <Select placeholder="请选择默认税率" loading={mapLoading} allowClear>
                            {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.COMPANY_TAXRATE}`]?.map((item: any) => {
                              return (
                                <Select.Option key={item?.id} value={item?.id}>
                                  {item?.name}%
                                </Select.Option>
                              );
                            })}
                          </Select>
                        </Form.Item>
                      </Col> */}
                      {/* <TagSelectNew
                        colSpan={12}
                        formLabel="是否永久有效"
                        formName="registerExpire"
                        defalultKeys={supplierInfoObj?.registerExpire === undefined ? 1 : supplierInfoObj?.registerExpire}
                        radioList={[
                          {
                            value: 1,
                            name: '是',
                          },
                          {
                            value: 0,
                            name: '否',
                          },
                        ]}
                        onChange={(checkValue: string) => {
                          setIsRegisterExpire(checkValue);
                        }}
                      />
                      {isRegisterExpire == '0' && (
                        <Col span={12}>
                          <Form.Item
                            label="有效日期"
                            name={'register'}
                            rules={[
                              {
                                required: true,
                                message: '请选择有效日期',
                              },
                            ]}
                          >
                            <RangePicker />
                          </Form.Item>
                        </Col>
                      )} */}
                      {/* <Col span={12}>
                        <Form.Item label="开始时间" name="registerBegin">
                          <DayDatePicket
                            allowClear={true}
                            placeholder="请选择开始时间"
                            style={{ width: '100%' }}
                            disabled={isRegisterExpire == '0' ? false : true}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="结束时间" name="registerFinish">
                          <DayDatePicket
                            allowClear={true}
                            placeholder="请选择结束时间"
                            style={{ width: '100%' }}
                            disabled={isRegisterExpire == '0' ? false : true}
                            disabledDate={(current: any) => {
                              return current && current < supplierForm?.getFieldValue('registerBegin');
                            }}
                          />
                        </Form.Item>
                      </Col> */}
                      {/* <Col span={24}>
                        <Form.Item label="注册地址" name="registerAddress">
                          <Input.TextArea placeholder={`请输入注册地址`} showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 3 }} />
                        </Form.Item>
                      </Col> */}
                    </Row>
                  </Collapse.Panel>
                  <Collapse.Panel header={<Divider orientation="left">其他联系人</Divider>} key={'contactsPanel'} className="formCollapsePanelBox">
                    <Row>
                      <Col span={24}>
                        <Form.List name="msupplierContacterList">
                          {(fields, { add, remove }) => {
                            return (
                              <>
                                <Form.Item style={{ paddingLeft: '104px' }}>
                                  <Button type="primary" onClick={() => add()} icon={<PlusOutlined />}>
                                    添加多个联系人
                                  </Button>
                                </Form.Item>
                                {/* 默认展示两个联系人，但有问题，需要再处理 */}
                                {false && (
                                  <>
                                    <Row>
                                      <Col span={12}>
                                        <Form.Item label={`联系人`} name={[0, `fullName`]}>
                                          <Input placeholder="请输入姓名" />
                                        </Form.Item>
                                      </Col>
                                      <Col span={12}>
                                        <Form.Item label={`联系电话`} name={[0, `phoneMobile`]}>
                                          <Input placeholder="请输入电话" />
                                        </Form.Item>
                                      </Col>
                                    </Row>
                                    <Row>
                                      <Col span={12}>
                                        <Form.Item label={`联系人`} name={[1, `fullName`]}>
                                          <Input placeholder="请输入姓名" />
                                        </Form.Item>
                                      </Col>
                                      <Col span={12}>
                                        <Form.Item label={`联系电话`} name={[1, `phoneMobile`]}>
                                          <Input placeholder="请输入电话" />
                                        </Form.Item>
                                      </Col>
                                    </Row>
                                  </>
                                )}

                                {fields.map((field, index) => {
                                  return (
                                    <Row key={field.key}>
                                      <Col span={12} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                        <Form.Item
                                          noStyle
                                          shouldUpdate={(prevValues, curValues) => prevValues.fullName !== curValues.fullName}
                                          style={{ width: '100%' }}
                                        >
                                          {() => (
                                            <Form.Item {...field} label={`联系人`} name={[field.name, `fullName`]} style={{ width: '100%' }}>
                                              <Input placeholder="请输入姓名" style={{ width: '100%' }} />
                                            </Form.Item>
                                          )}
                                        </Form.Item>
                                      </Col>
                                      <Col span={11} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                        <Form.Item {...field} label={`联系电话`} name={[field.name, `phoneMobile`]} style={{ width: '100%' }}>
                                          <Input placeholder="请输入电话" style={{ width: '100%' }} />
                                        </Form.Item>
                                      </Col>
                                      {/* <div style={{ display: 'flex', justifyContent: 'center', marginTop: '-10px', padding: '0 12px' }}>
                                        <DeleteOutlined style={{ color: 'red' }} onClick={() => remove(field.name)} />
                                      </div> */}
                                      <Col span={1}>
                                        <div
                                          style={{
                                            textAlign: 'center',
                                            marginBottom: '-10px',
                                            height: '100%',
                                            paddingTop: '4px',
                                          }}
                                        >
                                          <Popconfirm title={'确认要删除吗？'} okText={'确认'} cancelText={'取消'} onConfirm={() => remove(field.name)}>
                                            <DeleteOutlined style={{ color: 'red' }} />
                                          </Popconfirm>
                                        </div>
                                      </Col>
                                    </Row>
                                  );
                                })}
                              </>
                            );
                          }}
                        </Form.List>
                      </Col>
                    </Row>
                  </Collapse.Panel>
                </Collapse>
              </Form>
            </div>
          </ScrollBarLayout>
        </div>
        <div className="tabsBodyBottomBtn">
          {handleOperation?.allBtnDiv && (
            <Space>
              {handleOperation?.saveBtn && (
                <Button
                  type={'primary'}
                  onClick={onSaveSupplier}
                  // icon={<EditOutlined />}
                >
                  暂存
                </Button>
              )}
            </Space>
          )}
        </div>
      </div>
    </Spin>
  );
};
